<template>
	<div>

		<el-row v-if="table">
			<!--搜索条件/时间-->
			<el-col :span="1">
				<p class="queryLabel">选择月份:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker v-model="queryPostData.DateYearMonth" size="small" style="width:90%;" type="month" clearable placeholder="请选择月份">
				</el-date-picker>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">区域:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="area" placeholder="请选择区域" clearable @change="getCompanyInfo">
					<el-option v-for="item in areaCombo" :label="item.label" :value="item.code"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">品牌:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="brand" placeholder="请输入品牌名称" clearable @change="getCompanyInfo">
					<el-option v-for="item in brandCombo" :label="item.label" :value="item.code"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">公司:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="companyId" placeholder="请输入公司名称" clearable>
					<el-option v-for="item in companyCombo" :label="item.oName" :value="item.id"></el-option>
				</el-select>
			</el-col>

			<!--搜索-->
			<el-col :span="2" style="text-align:center">
				<el-button @click="showChart" size="small" type="primary">查询</el-button>
			</el-col>
		</el-row>
		<el-row :gutter="24" v-if="!table">
			<el-col :span="24" style="margin-left: -10px; text-align: right;">
				<el-button @click="back" size="small" type="primary">返回</el-button>
			</el-col>
		</el-row>

		<el-row :gutter="24" v-if="table" style="margin-top: 50px;" v-loading="loading2" element-loading-text="拼命加载中">
			<el-col :span="24">
				<div id="chartsDiv">
					<div id="charts" style="width:1100px;height:350px;"></div>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="24" v-if="table" style="margin-top: 50px;" v-loading="loading3" element-loading-text="拼命加载中">
			<el-col :span="24">
				<div id="chartsDiv">
					<div id="chartss" style="width:1100px;height:350px;"></div>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="24" v-if="!table">
			<el-table :data="detailData.detailDataList" border style="width: 100%;align-content: center;" v-loading="loading" element-loading-text="拼命加载中">
				<el-table-column label="vin" prop="vin" width="180">
				</el-table-column>
				<el-table-column label="品牌" prop="brand" width="180">
				</el-table-column>
				<el-table-column label="车龄" prop="carAge" width="180">
				</el-table-column>
				<el-table-column label="车牌号" prop="plateNum" width="180">
				</el-table-column>
				<el-table-column label="车主姓名" prop="ownerName" width="180">
				</el-table-column>
				<el-table-column label="车主身份证号" prop="ownerIdentity" width="180">
				</el-table-column>
				<el-table-column label="车主性别" prop="ownerGender" width="180">
				</el-table-column>
				<el-table-column label="车主邮箱" prop="ownerEmail" width="180">
				</el-table-column>
				<el-table-column label="购买日期" prop="buyDate" :formatter="dateChange" width="180">
				</el-table-column>
				<el-table-column label="车主地址" prop="ownerAddress" width="180">
				</el-table-column>
			</el-table>
			<el-pagination small @size-change="handleSizeChanges" @current-change="handleCurrentChanges" :current-page="CurentPages" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="detailData.total">
			</el-pagination>
		</el-row>

		<el-dialog title="详情" v-model="dialogShow" size="large">

		</el-dialog>
	</div>
</template>

<script>
	import echarts from 'echarts'
	import moment from 'moment'
	export default {
		data: function() {
			return {
				//查询条件
				area: '',
				brand: '',
				companyId: '',
				areaCombo: [],
				brandCombo: [],
				companyCombo: [],
				table: true,
				CurentPages: 1,
				page: this.page,
				dateYearMonthDay: "",
				nameType: "",

				dialogShow: false,
				loading2: false,
				loading3: false,
				loading: false,
				queryPostData: {
					DateYearMonth: "",
				},
				//详情数据
				detailData: {
					total: 0,
					detailDataList: "",
				},
				AddDataList: [], // 产值
				AddDateInterval: [], //时间段
				LoseDataList: [], // 产值
				LoseDateInterval: [], //时间段
				myChart: null,
				myCharts: null,
				//查询明细是的companyId
				queryCompanyId: '',
				//新增折线图数据存储
				addData: [],
				//流失折线图数据存储
				lostData: [],
			}
		},
		methods: {
			//fanhui
			back: function() {
				this.$data.table = true;
				this.queryChartsData();
			},
			//购买日期
			dateChange: function(row, column) {
				if(row.buyDate == '' || row.buyDate == null) {
					return "";
				} else {
					return moment(row.buyDate).format("YYYY-MM-DD");
				}
			},
			//查询按钮调用
			showChart: function() {
				if(this.$data.companyId == "") {
					this.$message.error("请选择公司！")
				} else {
					this.$data.loading2 = true; // 显示Loading
					this.$data.loading3 = true;
					debugger;
					//alert("显示图表");
					this.queryChartsData();
				}

			},
			handleSizeChanges: function() {

			},
			//页面切换
			handleCurrentChanges: function(currentPage) {
				this.$data.loading = true;
				this.$data.CurentPages = currentPage;
				/*if(this.$data.CurentPages != this.$data.CurentPages){
					alert("页面");
				}*/
				this.queryDetaillData(this.$data.dateYearMonthDay, this.$data.nameType, this.$data.queryCompanyId);
				debugger;
			},
			drawCharts: function() {
				debugger;
				this.$data.myChart = null;
				//获取图表对象
				this.$data.myChart = echarts.init(document.getElementById('charts'));

				// 指定图表的配置项和数据
				var option3 = {
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['流失车辆数']
					},
					grid: {
						top: 70,
						bottom: 50
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						//流失车辆/时间
						data: this.$data.LoseDateInterval
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						name: '流失车辆数',
						type: 'line',
						smooth: true,
						data: this.$data.LoseDataList,
					}, ]
				};
				this.$data.myChart.setOption(option3); // 配置图表数据
				var thisT = this; // 上下文
				/*图表点击监听*/
				this.$data.myChart.on('click', function(params) {
					debugger;
					thisT.$data.table = false; // 显示dialog
					thisT.$data.loading = true; //显示loading
					thisT.$data.detailData.total = 0; //总页置零
					thisT.$data.CurentPages = 1; // 当前页置一
					thisT.$data.detailData.detailDataList = []; //数据置零
					thisT.$data.dateYearMonthDay = params.name; // 临时变量
					thisT.$data.nameType = params.seriesName; // 临时变量
					thisT.$data.queryCompanyId = thisT.$data.lostData[params.dataIndex].companyId;
					thisT.queryDetaillData(params.name, params.seriesName, thisT.$data.queryCompanyId); // 查询
				});

			},
			drawChartss: function() {
				debugger;
				this.$data.myCharts = null;
				//获取图表对象
				this.$data.myCharts = echarts.init(document.getElementById('chartss'));

				// 指定图表的配置项和数据
				var option3 = {
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['新增车辆数'],
						itemStyle: {
							normal: {
								lineStyle: {
									color: '#675bba',
								}
							}
						},
					},
					grid: {
						top: 70,
						bottom: 50
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						//新增车辆/时间
						data: this.$data.AddDateInterval,
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						name: '新增车辆数',
						type: 'line',
						itemStyle: {
							normal: {
								lineStyle: {
									color: '#675bba',
								}
							}
						},
						smooth: true,
						data: this.$data.AddDataList,
					}, ]
				};
				this.$data.myCharts.setOption(option3); // 配置图表数据
				var thisT = this; // 上下文
				/*图表点击监听*/
				this.$data.myCharts.on('click', function(params) {
					debugger;
					thisT.$data.table = false; // 显示dialog
					thisT.$data.loading = true; //显示loading
					thisT.$data.detailData.total = 0; //总页置零
					thisT.$data.CurentPages = 1; // 当前页置一
					thisT.$data.detailData.detailDataList = []; //数据置零
					thisT.$data.dateYearMonthDay = params.name; // 临时变量
					thisT.$data.nameType = params.seriesName; // 临时变量

					thisT.$data.queryCompanyId = thisT.$data.addData[params.dataIndex].companyId; // 临时变量
					thisT.queryDetaillData(params.name, params.seriesName, thisT.$data.queryCompanyId); // 查询
				});

			},

			//详情查询
			queryDetaillData: function(date, name, company) {
				debugger;
				//alert(name);
				if(name == "新增车辆数") {
					debugger;
					this.$http.get(this.API_ROOT + "/crm/kpi/newAddBaseDataDetail", {
						params: {
							limit: this.page.pageSize,
							start: this.$data.CurentPages,
							DateYearMonthDay: date,
							companyId: company,
						}
					}).then(resp => {
						if(resp.data.success) {
							this.$data.detailData.detailDataList = resp.data.dataList;
							this.$data.detailData.total = parseInt(resp.data.total);
							//this.$data.dialogShow = true;
							this.$data.loading = false;
							debugger;
						}

					});
				}

				if(name == "流失车辆数") {
					debugger;
					this.$http.get(this.API_ROOT + "/crm/kpi/lostBaseDataDetail", {
						params: {
							limit: this.page.pageSize,
							start: this.$data.CurentPages,
							DateYearMonthDay: date,
							companyId: company,
						}
					}).then(resp => {
						if(resp.data.success) {
							this.$data.detailData.detailDataList = resp.data.dataList;
							this.$data.detailData.total = parseInt(resp.data.total);
							//this.$data.dialogShow = true;
							this.$data.loading = false;
							debugger;
						}
					});
				}
			},

			queryChartsData: function() {
				debugger;
				this.$data.queryPostData.DateYearMonth = this.momentFu(this.$data.queryPostData.DateYearMonth);

				//新增车辆置空
				this.$data.AddDataList = [];
				this.$data.AddDateInterval = [];
				this.$data.addData = [];
				//流失车辆置空
				this.$data.LoseDataList = [];
				this.$data.LoseDateInterval = [];
				this.$data.lostData = [];

				this.$http.get(this.API_ROOT + "/crm/kpi/lostBaseData", {
					params: {
						DateYearMonth: this.$data.queryPostData.DateYearMonth,
						companyId: this.$data.companyId,
						area: this.$data.area,
						brand: this.$data.brand,
					}
				}).then(resp => {
					debugger;
					//alert(resp.data.msg);
					if(resp.data.success) {
						if(resp.data.dataList.length > 0) {
							for(var i = 0; i < resp.data.dataList.length; i++) {
								this.$data.LoseDataList[i] = resp.data.dataList[i].total;
								this.$data.LoseDateInterval[i] = resp.data.dataList[i].lostDate;
							}
							this.$data.lostData = resp.data.dataList;
							this.drawCharts(); // 绘图
							this.$data.loading2 = false; //隐藏Loading
						} else {
							this.$data.loading2 = false; //隐藏Loading
						}
						this.$http.get(this.API_ROOT + "/crm/kpi/newAddBaseData", {
							params: {
								DateYearMonth: this.$data.queryPostData.DateYearMonth,
								companyId: this.$data.companyId,
								area: this.$data.area,
								brand: this.$data.brand,
								//DateYearMonth:"2017-03",
							}
						}).then(resp2 => {
							//alert(resp.data.msg);
							if(resp2.data.success) {
								if(resp2.data.dataList.length > 0) {
									for(var i = 0; i < resp2.data.dataList.length; i++) {
										this.$data.AddDataList[i] = resp2.data.dataList[i].total;
										this.$data.AddDateInterval[i] = resp2.data.dataList[i].addDate;
									}
									this.$data.addData = resp2.data.dataList;

									this.drawChartss(); // 绘图
									this.$data.loading3 = false; //隐藏Loading
								} else {
									this.$data.loading3 = false; //隐藏Loading
								}
							}
						});
					}

				});
			},

			//时间格式化
			momentFu: function(dt) {
				if(dt == '' || dt == null || dt == undefined) {
					return "";
				} else {
					return this.moment(dt).format("YYYY-MM");
				}
			},
			//获取公司信息
			getCompanyInfo: function() {
				//this.$data.data.companyId = ""; //清空单位
				this.$data.companyId = ""; //清空单位
				this.$data.companyCombo = [];
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/all", {
					params: {
						area: this.$data.area,
						brand: this.$data.brand
					}
				}).then(resp => {
					this.$data.companyCombo = resp.data.dataList;
					if(this.$data.companyCombo.length > 0) {
						this.$data.companyId = this.$data.companyCombo[0].id;
					}
				});
			},
			//获取区域
			getarea: function() {

				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/area/all", {
					params: {

					}
				}).then(resp => {
					this.$data.areaCombo = resp.data.dataList;
				});
			},
			//获取品牌
			getBrand: function() {
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/brand/all", {
					params: {}
				}).then(resp => {
					this.$data.brandCombo = resp.data.dataList;
				});
			},

		},
		created: function() {
			this.getarea();
			this.getBrand();
			this.getCompanyInfo();

		},
		components: {

		}
	}
</script>

<style>

</style>